<template>
  <div>
    <div class="tab">
      <ul>
        <li
          v-for="item in tabList"
          :key="item.id"
          @click="clickTab(item.id)"
          :class="hoverTab == item.id ? 'active' : ''"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="videoList">
      <mv-item
        v-for="(item, index) in videoList"
        :key="index"
        :imgUrl="item.coverUrl"
        :tilte="item.description ? item.description : item.name"
        :authorList="item.creator ? item.creator : item.artists"
        :preview="item.previewUrl"
        :time="item.playTime"
        :id="item.vid ? item.vid : item.id"
      ></mv-item>
    </div>
  </div>
</template>

<script>
import { getVideoTabAPI, getVideoAPI } from "@/api";
import MvItem from "@/components/MVItem.vue";
export default {
  name: "VideoRecom",
  components: {
    MvItem,
  },
  data() {
    return {
      tabList: [],
      hoverTab: 0, //当前选中的tab
      videoList: [], //视频信息数组
      offset: 0, //分页
      canLoad:true,  //控制触底
    };
  },
  methods: {
    // 获取标签列表
    async getVideoTab() {
      const res = await getVideoTabAPI();
      if (res.data.code == 200) {
        this.tabList = res.data.data;
        this.hoverTab = this.tabList[0].id;
      } else alert("网络错误");
    },
    // 获取视频
    async getVideoList() {
      const res = await getVideoAPI({ id: this.hoverTab, offset: this.offset });
      res.data.datas.forEach((item) => {
        this.videoList.push(item.data);
      });
      this.offset = this.videoList.length;
      if (this.videoList.length % 3 != 0) {
        this.getVideoList();
      }
      console.log(res);
      this.canLoad = true;
    },
    // 点击改变hoverTab
    clickTab(id) {
      this.offset = 0;
      this.videoList = [];
      this.hoverTab = id;
    },
  },
  watch: {
    hoverTab() {
      this.getVideoList();
    },
  },
  computed: {
    main() {
      return this.$store.state.scroll.main;
    },
  },
  created() {
    this.getVideoTab();
    this.getVideoList();
    this.main.addEventListener("scroll", (e) => {
      if (this.$route.name == "videorecom") {
        let isLoadMore = e.target.scrollHeight - e.target.scrollTop - e.target.offsetHeight < 10;
        if (isLoadMore&&this.canLoad) {
          this.canLoad = false;
          this.getVideoList();
        }
      }
    });
  },
};
</script>

<style lang="less" scoped>
.tab {
  width: 100%;
  margin: 15px 0 15px 24px;
  margin-left: 24px;
  margin-bottom: 15px;
  ul {
    width: 80%;
    display: flex;
    li {
      float: left;
      font-size: 14px;
      font-weight: lighter;
      padding: 4px 6px 4px 6px;
      margin-right: 10px;
      cursor: pointer;
    }
    .active {
      background-color: rgb(254, 248, 250);
      color: #ff7a9e;
      border-radius: 16px;
    }
  }
}
.videoList {
  margin: 0 auto;
  width: 95%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>